/**
* 验票项目列表
*/
import React, { Component } from 'react'

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Alert,
  Button,
  Dimensions,
  TouchableWithoutFeedback,
  TouchableOpacity,
  StatusBar,
  Linking,
  TextInput,
  ScrollView
} from 'react-native'

import SafeView from 'react-native-safe-area-view'
import GetSetStorge from '../../common/GetSetStorge'
import ImageResources from '../../common/ImageResources'
import RNToAndroid from '../../common/RNToAndroid'
import { RouteHelper } from 'react-navigation-easy-helper'
import NavPage from '../../common/NavPage'
import Screen from '../../common/screen'
import axios from 'axios'
import qs from 'qs'
import Toast from 'antd-mobile/lib/toast'

export default class Customer extends Component {
  static navigationOptions = ({ navigation }) => ({
    tabBarOnPress: (tab) => {
      navigation.state.params.navigatePress()
      tab.jumpToIndex(tab.scene.index)
    }
  })

  constructor(props) {
    super(props)
    this.state = {
      permissionList:[]
    }
  }

  componentDidMount() {
    let permissionList = this.props.navigation.state.params.permissionList
    this.setState({permissionList:JSON.parse(permissionList)},()=>{
    })
    this.props.navigation.setParams({ navigatePress: this.clickTabCallback })
  }

  // tab 切换调用方法
  clickTabCallback = () => {
    // this.refs.header.reload()
  }

  onButtonPress(consumptionName,consumptionId,price) {
    RouteHelper.navigate('InspectQuery',{consumptionName,consumptionId,price})
  }

  goBack() {
    RouteHelper.pop()
  }

  next() {

  }



  render() {
    let { permissionList } = this.state
    return (
      <SafeView forceInset={{ top: 'always', bottom: 'never' }} style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <StatusBar
            animated={true}
            hidden={false}
            backgroundColor={'#111'}
            translucent={true}
            barStyle={'light-content'}
            showHideTransition={'fade'}
            networkActivityIndicatorVisible={true}
          />
          <NavPage goBack={() => { RouteHelper.pop() }} showGoBack={true} title={''} bgColor={'#F6F7F8'} />
          <View style={styles.container}>
            <View style={{ height: 30 }}>
              <Text style={{ fontSize: 20, fontWeight: '500', color: '#111', marginLeft: Screen.width * 0.075 }}>验票</Text>
            </View>

            <ScrollView
              showsVerticalScrollIndicator={false}    // 隐藏垂直指示器
              style={{ flex: 1, }}
            >

              <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', width: Screen.width, paddingTop: 10, }}>
                {
                  permissionList.map((item, index) => (
                    item.checkPermission == '1' ?

                    <TouchableWithoutFeedback underlayColor="rgb(210, 230,255)" activeOpacity={0.5} onPress={this.onButtonPress.bind(this,item.consumptionName,item.consumptionId,item.price)}   >
                      
                      <View style={[styles.item,{borderBottomLeftRadius:4,borderTopLeftRadius:4,}]}>
                        <View style={{height:Screen.width*0.37,justifyContent: 'center',alignItems:'center',borderBottomLeftRadius:4,borderTopLeftRadius:4,flex:2,}}>
                          <Image style={{width:Screen.width*0.9,height:Screen.width*0.37}} source={ImageResources.CommonIcon[`Item${index}`]} />
                          <Text style={{ fontSize:12,textAlign: 'center',position:'absolute',top:20,right:20,color:'#fff'}}>{`心宿花海 · 龙隐于湾`}</Text>
                          <Text style={{ fontSize:27,fontWeight:'500', textAlign: 'center',position:'absolute',bottom:30,right:30,color:'#fff'}}>{item.consumptionName}</Text>
                        </View>
                      </View>
                    </TouchableWithoutFeedback>

                    // <TouchableWithoutFeedback underlayColor="rgb(210, 230,255)" activeOpacity={0.5} onPress={this.onButtonPress.bind(this,item.consumptionName,item.consumptionId,item.price)}   >
                    //   <View style={styles.item}>
                    //     <Text style={{ fontSize: 24, textAlign: 'center' }}>{item.consumptionName}</Text>
                    //   </View>
                    // </TouchableWithoutFeedback>
                    
                    :null
                  ))
                }
              </View>
            </ScrollView>
          </View>
        </View> 
      </SafeView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F6F7F8',
  },
  header: {
    height: 500
  },
  item: {
    width: Screen.width*0.9,
    height: Screen.width*0.37,
    // backgroundColor: '#D8D8D8',
    marginBottom: 10,
    borderRadius: 5,
    justifyContent: 'center',
  },
  customerImage: {
    flex: 1.5,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  customerImageSize: {
    height: 102,
    width: 132,
    resizeMode: "contain"
  },
  bottomButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginBottom: 25,
  },
  TouchableHighlightStyle: {
    borderRadius: 6,
    marginTop: 5,
    padding: 13,
    alignItems: 'center',
    width: Dimensions.get('window').width * 0.85,
    backgroundColor: "#105eae"
  },
  buttonText: {
    fontSize: 16,
    alignItems: 'center',
    textAlign: "center",
    color: "#fff"
  },
  itemNameLay: {
    alignSelf: 'flex-start',
    marginTop: 16,
    paddingHorizontal: Screen.width * 0.088,
  },
  itemName: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000'
  },
  mainLay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  inputLay: {
    width: Screen.width * 0.784,
    height: 42,
    marginTop: 16,
    paddingHorizontal: 16,
    borderRadius: 21,
    borderColor: '#CDD5DC',
    borderWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  inputTxt: {
    height: 24,
    padding: 0,
    fontSize: 16,
    flex: 1
  },
  inputCode: {
    width: 24,
    height: 24
  },
  //详情
  detail: {
    width: Screen.width * 0.866,
    height: 224,
    marginTop: 14,
    backgroundColor: 'white',
    borderRadius: 5,
    alignItems: 'center',
    //设置阴影
    shadowOffset: { width: 0, height: 0 },
    shadowColor: 'black',
    shadowOpacity: 1,
    shadowRadius: 5
  },
  theme: {
    marginVertical: 26,
  },
  themeName: {
    fontSize: 16,
    color: 'rgba(0,0,0,.72)',
  },
  itemLay: {
    width: Screen.width * 0.717,
    height: 30,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  itemFs: {
    fontSize: 14,
    color: 'rgba(0,0,0,.42)'
  },
  detailItem: {
    width: Screen.width * 0.866,
    height: 32,
    // backgroundColor:'pink',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 24,
    paddingLeft: Screen.width * 0.085,
    paddingRight: Screen.width * 0.0426,
    borderTopColor: '#CDD5DC',
    borderTopWidth: 1,

  },
  itemTxt: {
    fontSize: 14,
    color: 'rgba(0,0,0,.72)',
  }
});